<template>
  <div class="login_box">
    <div class="login_content">
      <el-container>
        <!-- 左边部分 -->
        <el-aside>
          <div class="log">
            <img src="/public/imgs/zxwy_log.png" alt="">
          </div>
          <div>欢迎!</div>
          <div>智学商城-后台管理系统</div>
        </el-aside>
        <!-- 右边部分 -->
        <el-main>
          <p>登录</p>
          <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
            <el-form-item prop="username">
              <el-input v-model="ruleForm.username" type="text" :prefix-icon="User" placeholder="用户名"
                @keydown.enter="submitForm(ruleFormRef)" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="ruleForm.password" type="password" :prefix-icon="Lock" placeholder="密码"
                @keydown.enter="submitForm(ruleFormRef)" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
            </el-form-item>
          </el-form>
          <div>作者：李</div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'//引入input图标
import { ElMessage, type FormInstance } from 'element-plus' //消息提示
import { useRouter, useRoute } from "vue-router";
import cookie from "js-cookie"
import { useUserStore } from "@/stores/admin/Index";
import { post } from "@/http/request";
import { debuonce,throttle } from "@/utils/DebounceThrottle";

const router = useRouter()
const route = useRoute()
const store = useUserStore()

const ruleFormRef = ref<FormInstance>()

// 输入框非空验证
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入用户名'))
  } else {
    callback()
  }
}

// 密码框非空验证
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}

// 输入框绑定的属性
const ruleForm = reactive({
  username: 'admin',
  password: '1234567',
})

// 输入框验证规则
const rules = reactive({
  username: [{ validator: validatePass, trigger: 'blur' }],
  password: [{ validator: validatePass2, trigger: 'blur' }],
})

// 登录按钮
const submitForm = throttle((formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      let params = {//请求需要传递的参数
        _gp: 'admin',
        _mt: 'login',
        username: ruleForm.username,
        password: ruleForm.password
      }
      post(params).then(res => {//请求登录接口
        // console.log(res);
        let { data, errno, errmsg } = res
        let token = data
        if (200 == errno) {
          let now = new Date()//获取时间戳
          now.setTime(now.getTime() + 1000 * 60 * 30)//设置时间
          cookie.set('token', token, { expires: now })//存储token
          ElMessage.success('登录成功')
          return Promise.resolve(token)
        } else {
          return Promise.reject(errmsg)
        }
      }).then(res => {
        let data = {
          _gp: "admin",
          _mt: "info",
        }
        // 请求获取用户信息
        post(data).then(res => {
          // console.log(res);
          let { data, errmsg, errno } = res
          if (200 == errno) {
            store.setUser({ ...data,password:ruleForm.password})
            let back = route.query.back as string
            if (back) {
              router.replace(back)//跳转到退出之前显示的页面
              return
            }
            router.replace('/')//跳转到首页
          } else {
            return Promise.reject(errmsg)
          }
        })

      }).catch(err => {
        ElMessage.error(err)
      })
    } else {
      ElMessage.error('请输入账号或密码！')
      return false
    }
  })
},1000)
</script>


<style lang="less" scoped>
.login_box {
  width: 100vw;
  height: 100vh;
  background: url('/public/imgs/login_bg.jpg')0 0 no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  overflow: hidden;


  .login_content {
    width: 50vw;
    margin: auto;

    .el-container {
      height: 65vh;
    }

    // 左边部分
    .el-aside {
      width: 40%;
      height: 100%;
      background-color: #005DE9;
      border-radius: 5px 0 0 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #fff;
      line-height: 2;

      .log img {
        height: 100px;
        border-radius: 50%;
        box-shadow: 10px -5px 50px #fff;
      }

    }

    ::-webkit-scrollbar {
      //去除滚动条
      display: none;
    }

    // 右边部分
    .el-main {
      width: 60%;
      height: 100%;
      background-color: #fff;
      border-radius: 0px 5px 5px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .el-form {
        width: 60% !important;
      }

      .el-input {
        height: 40px;
        line-height: 40px !important;
      }

      p {
        font-size: 18px;
        margin: 20px 0;
      }

      .el-form-item {
        margin-bottom: 25px !important;
      }

      // 登录按钮
      .el-button {
        margin: auto;
        padding: 0px 15%;
        height: 40px;
        font-size: 14px;
        letter-spacing: 5px;
      }
    }

  }

}
</style>
